<template>
  <div class="box">
    <div class="ovr">
      <titleHead :Crumbs="Crumbs"></titleHead>
      <div class="center">
        <!-- 所有场景 -->
        <div class="title">场景管理</div>
        <div class="search">
          <input type="text" placeholder="请在此输入搜索内容" v-model="search" />
          <el-button @click="confirm_search">搜索</el-button>
          <el-button @click="new_scene">新建场景</el-button>
        </div>
        <div class="tableRoll">
          <el-table :data="sceneList" border style="width: 100%">
            <el-table-column label="序号" type="index" width="118"></el-table-column>
            <el-table-column prop="name" label="名称" width="258"></el-table-column>
            <el-table-column prop="memo" label="描述" width="257" show-overflow-tooltip></el-table-column>
            <el-table-column width="265" label="已经关联的分组" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="(item,index) in scope.row.aptList" :key="index">{{item}} ;&nbsp;&nbsp;</span>
              </template>
            </el-table-column>
            <el-table-column prop="isUsing" label="场景状态" width="258">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isUsing"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="启用"
                  inactive-text="禁用"
                  active-color="#09bada"
                  @change="activation(scope.row.id,scope.row.isUsing)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column width="256" label="操作">
              <template slot-scope="scope">
                <span @click="update_scene(scope.row.id)">修改关联</span>
                <span @click.stop="put_scene(scope.row)">修改名称</span>
                <span @click.stop="del_scene(scope.row.id)">删除场景</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :current-page="page"
            :page-size="10"
            :total="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="show" v-if="Selection">
      <div class="groupOperation">

        <div class="Roll">
          <div class="title">已关联策略列表</div>
          <div class="search">
            <el-button @click="confirm_group">下发选中</el-button>
            <el-button @click="confirm_group_All">下发全部</el-button>
          </div>
          <div class="tipc">
            <span>名称</span>
            <span>描述</span>
            <span>操作</span>
          </div>
          <ul class="container">
            <li v-for="(item,index) in strategy_list.policies" :key="index">
              <span :title="item.name">{{item.name.length>8?item.name.slice(0,7)+"...":item.name}}</span>
              <span :title="item.memo">{{ item.memo?item.memo.slice(0,7):item.memo="无" }}</span>
              <span>
                <b @click.stop="del_strategy(item,index)">移除</b>
                <b @click.stop="chooseItem($event,item.id)" class="degreeBtn">选中</b>
              </span>
            </li>
          </ul>
        </div>
        <!-- 关联从策略 -->
        <div class="Roll">
        <div class="closeGroup">
          <i class="el-icon-close" @click="closeGroup"></i>
        </div>
          <div class="title">未关联策略列表</div>
          <div class="tipc">
            <span>名称</span>
            <span>描述</span>
            <span>操作</span>
          </div>
          <ul class="container">
            <li v-for="(item,index) in strategy_list.policyList" :key="index">
              <span :title="item.name">{{item.name.length>8?item.name.slice(0,7)+"...":item.name}}</span>
              <span :title="item.memo">{{ item.memo?item.memo.slice(0,7):item.memo="无" }}</span>
              <span @click="add_strategy(item,index)">增加</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="btn" @click="update_strategy">
        <el-button>确认</el-button>
      </div>
    </div>
    <!-- 选中的场景 -->
    <!-- 新建场景 -->
    <div class="Mask" v-show="Mask">
      <div class="name_ipt">
        <div class="tips">
          <span>{{Distinguish}}</span>
          <i @click="Close_window" class="el-icon-close"></i>
        </div>
        <div class="new_center">
          <input type="text" placeholder="请输入场景名" v-model="data.name" />
          <div class="txt">
            <textarea placeholder="请输入场景描述" v-model="data.memo"></textarea>
          </div>
          <div class="btn">
            <el-button @click="add_name">{{Distinguish}}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import titleHead from "@/views/title";
export default {
  components: {
    titleHead
  },
  props: ["Crumbs", "devType"],
  data() {
    return {
      Mask: false,
      sceneList: [],
      strategy_list: {},
      flag: 0,
      Distinguish: "",
      data: {
        name: "",
        memo: ""
      },
      total: 1,
      page: 1,
      groups: {
        aptIds: [],
        sceneId: null
      },
      active: -1,
      Selection: false,
      ss: " "
    };
  },
  methods: {
    confirm_group_All() {
      if (!this.groups.sceneId) {
        this.$message.warning("请先选择场景");
        return;
      }
      this.$confirm("是否下发全部", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 判断是不是有这个类名节约性能
          if (document.querySelectorAll(".deegreeSelect").length > 0) {
            var elment = document.querySelectorAll(".degreeBtn");
            let elmentLen = elment.length;
            for (var i = 0; i < elmentLen; i++) {
              elment[i].classList.remove("deegreeSelect");
            }
          }
          let array = [];
          let len = this.strategy_list.policies.length;
          for (var i = 0; i < len; i++) {
            array.push(this.strategy_list.policies[i].id);
          }
          this.groups.aptIds = array;
          this.$http
            .post("/api/threesuns/scene/appointment/send", this.groups)
            .then(res => {
              if (res.data.code == "200") {
                array = [];
                this.$message.success(res.data.message);
                this.groups.aptIds = [];
              } else {
                array = [];
                this.$message.warning(res.data.message);
                this.groups.aptIds = [];
              }
            })
            .catch(err => {
              this.groups.aptIds = [];
              array = [];
              this.$message.error(error.data.message);
              this.groups.aptIds = [];
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
     closeGroup (){
            this.Selection= false
      },

    // 下发组
    confirm_group() {
      this.$confirm("是否下发", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/api/threesuns/scene/appointment/send", this.groups)
            .then(res => {
              if (res.data.code == "200") {
                this.$message.success(res.data.message);
                this.groups.aptIds = [];
              } else {
                this.$message.warning(res.data.message);
              }
            })
            .catch(err => {
              this.$message.error(error.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 多选组
    chooseItem(e, text) {
      if (e.target.className.indexOf("deegreeSelect") === -1) {
        e.target.className = "degreeBtn deegreeSelect"; // 选中
        this.groups.aptIds.push(text);
        console.log(text);

      } else {
        e.target.className = "degreeBtn"; // 反选
        for (var i = 0; i < this.groups.aptIds.length; i++) {
          if (this.groups.aptIds[i] === text) {
            this.groups.aptIds.splice(i, 1);
            break;
          }
        }
      }
    },
    // 激活场景
    activation(id, isUsing) {
      this.$confirm(
        `此操作将此${isUsing == 0 ? "禁用" : "启用"}   场景, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http
            .post(
              isUsing == 0
                ? "/api/threesuns/scene/disable"
                : "/api/threesuns/scene/enable",
              {
                sceneId: id
              }
            )
            .then(res => {
              if (res.data.code == "200") {
                this.$message.success(res.data.message);
                this.scene();
              } else {
                this.scene();
                this.$message.error(res.data.message);
              }
            })
            .catch(err => {
              this.$message.error(err.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
          this.scene();
        });
    },
    // ———————————————————————————————上面待修改———————————————————————————————
    new_scene() {
      this.data = {};
      this.Distinguish = "新建场景";
      this.Mask = true;
    },
    //修改场景名称
    put_scene(item) {
      this.Mask = true;
      this.Distinguish = "修改名称";
      this.data = item;
    },
    // 新建
    add_name() {
      if (this.Distinguish == "新建场景") {
        this.$http
          .post("/api/threesuns/scene/create", this.data)
          .then(res => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.data = {};
              this.scene();
              this.Close_window();
            }
          })
          .catch(err => {
            this.$message.error(err.data.message);
          });
      } else {
        this.$http
          .put("/api/threesuns/scene/update", this.data)
          .then(res => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.data = {};
              this.scene();
              this.Close_window();
            }
          })
          .catch(err => {
            this.$message.error(err.data.message);
          });
      }
    },
    del_scene(id) {
      this.$confirm("此操作将永久删除该场景, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete("/api/threesuns/scene/delete", {
              params: {
                ids: id
              }
            })
            .then(res => {
              if (res.data.code == "200") {
                this.$message.success(res.data.message);
                this.scene();
              } else {
                this.$message.warning(res.data.message);
              }
            })
            .catch(err => {
              this.$message.error(err.data.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    Close_window() {
      this.Mask = false;
      this.scene()
    },
    // 从未关联到已关联
    add_strategy(item, index) {
      this.strategy_list.policies.push(item),
        this.strategy_list.policyList.splice(index, 1);
    },
    // 从关联到未关联
    del_strategy(item, index) {
      this.strategy_list.policyList.push(item);
      this.strategy_list.policies.splice(index, 1);
    },
    //确定修改
    update_strategy() {
      this.$http
        .put("/api/threesuns/scene/update", this.strategy_list)
        .then(res => {
          if (res.data.code == "200") {
            this.scene();
            this.closeGroup()
            this.$message.success(res.data.message);
          } else {
            this.scene();
            this.$message.warning(res.data.message);
            this.closeGroup()
          }
        })
        .catch(err => {
            this.closeGroup()
            this.scene();
          this.$message.error(err.data.message);
        });
    },
    //当前的点击的场景
    update_scene(id, index) {
      this.strategy_list={}
      this.Selection = true;
      this.active = index;
      this.groups.aptIds = [];
      this.groups.sceneId = id;
      var elment = document.querySelectorAll(".degreeBtn");
      for (var i = 0; i < elment.length; i++) {
        elment[i].classList.remove("deegreeSelect");
      }
      console.log(elment);

      this.$http
        .get("/api/threesuns/scene/get", {
          params: {
            sceneId: id
          }
        })
        .then(res => {
          this.strategy_list = res.data.data;
        });
    },
    confirm_search() {
      this.page = 1;
      this.scene();
    },
    // 分页
    handleCurrentChange(e) {
      this.page = e;
      this.scene();
    },
    // 所有场景
    scene() {
      this.$http
        .get("/api/threesuns/scene/list/get", {
          params: {
            name: this.search,
            page: this.page - 1,
            size: 10
          }
        })
        .then(res => {
          if (res.data.code == "200") {
            console.log(res.data.data);
            this.sceneList = res.data.data;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    }
  },
  mounted() {
    this.scene();
  }
};
</script>
<style scoped>
@import url("../../../assets/css/table.css");
.box {
  height: 100%;
  width: 100%;
  position: relative;
  min-width: 1580px;
}
.ovr {
  overflow: hidden;
  margin: 0 auto;
  height: 100%;

}
.center {
  width: 1416px;
  height: 100%;
  margin: 0 auto;
  margin-top: 55px;
  background-color: #011615;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 1px 14px 0px #0dc2c3 inset;
}
.tableRoll {
  height: 667px;
  overflow-y: scroll;
}
.subbox {
  height: 632px;
}
.show {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  top: 0px;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.4);
}
.closeGroup {
  position: absolute;
   right: 0px;
    top: -50px;
  font-size: 40px;
  color: #fff;
}
.groupOperation {
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin-top: 70px;
}
.Roll {
  height: 400px;
  width: 482px;
  height: 630px;
  margin-left: 17px;
  border: 1px solid #fff;
  background-color: #011615;
  margin-top: 100px;
  position: relative;
}
.title {
  font-size: 22px;
  background-color: #1d938d;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
}
.search {
  height: 60px;
  line-height: 69px;
  border: 1px solid #0dc2c3;
  padding-left: 70px;
  box-shadow: 0px 1px 6px 0px #0dc2c3 inset;
}
.search input {
  width: 454px;
  margin-right: 20px;
  height: 28px;
  background: none;
  border: 1px solid #ffffff;
  padding-left: 42px;
  outline: none;
  color: #fff;
}
.search .el-button {
  padding: 10px 15px;
  margin-right: 20px;
}

.container input {
  width: 198px;
  height: 30px;
  border: none;
  border: 1px solid #ccc;
  margin-right: 15px;
}
.container .Tips {
  background: none;
  text-align: center;
  margin-top: 150px;
}
.container :hover {
  cursor: pointer;
}
.block {
  text-align: center;
}
.tipc {
  background-color: #055555;
  border: 1px #ffffff solid;
  border-right: none;
  border-left: none;
  font-size: 18px;
}
.tipc span:first-child {
  width: 151px;
}
.tipc span {
  display: inline-block;
  width: 150px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-right: 1px solid #fff;
}

span {
  margin: 0;
}
.tipc span:last-child {
  border: none;
}
.Mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: -60px;
  z-index: 5;
}
.name_ipt {
  width: 400px;
  height: 454px;
  background-color: #011615;
  margin: 200px auto;
  box-shadow: 0px 5px 29px 0px #0dc2c3 inset;
}
.name_ipt input {
  height: 30px;
  padding-left: 30px;
  background: none;
  border: none;
  border: 1px solid #fff;
  margin-top: 20px;
  color: #fff;
}
.tips {
  height: 35px;
  line-height: 35px;
  background-color: #1d938d;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.tips span {
  margin-left: 66px;
}
.tips i {
  float: right;
  margin-right: 30px;
  margin-top: 10px;
}
.txt {
  margin-top: 20px;
}
.txt textarea {
  width: 358px;
  height: 200px;
  resize: none;
  background: none;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.btn {
  text-align: center;
  margin-top: 15px;
}
.container span {
  display: inline-block;
  width: 151px;
  text-align: center;
  color: #c5c5c5;
}
.container li {
  width: 482px;
  border-bottom: 1px solid #ffff;
}
.container li span {
  border-right: 1px solid;
  padding: 7px 0 7px 0;
}
.container li span:last-child {
  border: none;
  padding: 0;
}
.container li span b {
  display: inline-block;
  width: 48%;
  text-align: center;
  border-right: 1px solid;
  padding: 0;
  padding: 7px 0 7px 0;
}
.container li span b:last-child {
  border: none;
}
.container {
  height: 450px;
  overflow-y: scroll;
  overflow-x: hidden;

}
.container li span:nth-child(2) {
  width: 152px;
}
.container1 li {
  width: 482px;
}
.container1 li span {
  border-right: 1px solid #fff;
  padding: 7px 0 7px 0;
}
.container1 li span i {
  display: inline-block;
  width: 48%;
  /* height: 35px; */
  border-right: 1px solid #fff;
}
.container1 li span b:last-child {
  border: none;
}
.container1 li span:last-child {
  border: none;
  padding: 0;
  height: 32px;
}
.container1 li span b {
  display: inline-block;
  width: 31%;
  /* height: 30px; */
  border-right: 1px solid #fff;
  padding: 7px 0 7px 0;
}
.tableRoll::-webkit-scrollbar,
.container::-webkit-scrollbar {
  width: 2px;
}
.tableRoll::-webkit-scrollbar-track,
.container::-webkit-scrollbar-track {
  /* background: #ccc; */
  background: #011615;
}
.tableRoll::-webkit-scrollbar-thumb,
.container::-webkit-scrollbar-thumb {
  background: #ccc;
}
/deep/ .el-pagination button:disabled {
  background-color: rgba(0, 0, 0, 0);
}
/deep/ .el-pager li {
  background-color: rgba(0, 0, 0, 0);
}
/deep/ .el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  background: none;
}
.title .el-button {
  padding: 8px 10px;
}

.deegreeSelect {
  color: red;
}
.activeClass {
  background-color: #1d938d;
}
.el-button {
  background-color: #1d938d;
  color: #fff;
}
.new_center {
  text-align: center;
  /* border: 1px solid #fff; */
}
/deep/ .el-switch__label.is-active {
  color: #09bada;
}
/deep/ .el-switch__label {
  color: #9e9e9e;
}
span:hover{
  cursor: pointer;
}

</style>
